<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="../assets/css/reset-min.css" rel="stylesheet" type="text/css" /> 
        <link href="../assets/css/popup.css" rel="stylesheet" type="text/css" /> 
    </head>
    <body>
        <div id="page">
            <div id="header">
                <ul id="channel">
                    <li class="friends"   title="Home">Friends</li>
                    <li class="replies selected" title="Mention">Mention</li>
                    <li class="directs"   title="Direct Message">Direct Message</li>
                    <li class="favourite" title="Favourite">Favourite</li>
                </ul>
                <div class="action">
                    <button id="refresh" title="Refresh">Refresh</button>
                    <button title="Config Metrist" type="button" id="config">config</button>
                </div>
            </div>
            <div id="content">
                <div>
                    <ul class="tweets" id="metrist:friends" ref="friends">
                        <li class="fa/v">
                        <h4 class="nick">
                            <a title="{screen_name}\'s Homepage" href="https://twitter.com/{screen_name}">{name}</a>
                        </h4>
                        <p class="avatar">
                            <img width="48" height="48" src="http://is.gd/5DYSo" alt="{screen_name}"/></p>
                        <p
                        class="message">{formated_text}</p>
                        <p class="extra"><span
                            class="time">{relative_time}</span><span class="via">via <a href="#">web</a></span></p>
                        <p class="act" param:id="{id}">
                            <a href="#" act="delete" title="Delete this tweets">Delete</a>
                            <a href="#" act="direct" title="Send direct mesage">Direct</a>
                            <a href="#" act="retweet" title="Retweet">Retweet</a>
                            <a href="#" act="reply" title="Reply @'+ sender.screen_name +'">Reply</a>
                        </p>
                        <a href="#" act="favourite">Favourite</a>
                        </li>
                    </ul>
                    <ul class="tweets" id="metrist:replies"  ref="replies"></ul>
                    <ul class="tweets" id="metrist:directs"  ref="directs"></ul>
                    <ul class="tweets" id="metrist:favourite" ref="favourite"></ul>
                </div>
            </div>
            <div id="form">
                <form action="" method="post" id="metrist:form">
                    <div id="tweet">
                        <textarea id="form:input"></textarea><span id="form:status">140</span>
                        <div class="action">
                            <button title="Send" type="button" id="submit">update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="loading" class="loading-min hidden"></div>
        <div id="notice" class="hidden"><span></span></div>
        <!-- user plain -->
        <div id="personal" class="hidden">
            <div>
                <h4>@feelinglucky</h4>
                <p class="avatar"><img src="https://s3.amazonaws.com/twitter_production/profile_images/65068764/%E6%88%91%E7%9A%84%E5%A4%B4%E5%83%8F_bigger.png" width="64" height="64"</p>
                <p class="name">明城</p>
                <p class="location">Hangzhou,Zhejiang (UTC+8)</p>
                <p class="web"><a href="#">http://www.gracecode.com/</a></p>
                <ul class="count">
                    <li><em>83</em> friends</li>
                    <li><em>748</em> followers</li>
                    <li><em>6108</em> tweets</li>
                </ul>
                <p class="time">Updated 2 minutes ago <br /> Joined 2 years ago</p>
                <div class="hr"></div>
                <p class="status">@ivershuo 阿肆愤青了，有句话叫“你看什么事情想不通的，想想贵国
                也就通了”，至于各种原因，也就心照不宣了。</p>
                <ul class="act">
                    <li class="reply"><button>Reply</button></li>
                    <li class="direct"><button>Direct</button></li>
                    <li class="follow"><button>Follow</button></li>
                    <li class="block"><button>Block</button></li>
                    <li class="close"><button>Close</button></li>
                </ul>
            </div>
        </div>
        <!-- end of user plain -->

        <!--
        <script type="text/javascript" src="assets/yui-special/yahoo.js"></script>
        <script type="text/javascript" src="assets/yui-special/dom.js"></script>
        <script type="text/javascript" src="assets/yui-special/event.js"></script>
        <script type="text/javascript" src="assets/yui-special/animation.js"></script>
        <script type="text/javascript" src="assets/yui-special/connection_core.js"></script>
        <script type="text/javascript" src="assets/scripts/helper.js"></script>
        <script type="text/javascript" src="assets/scripts/ui.js"></script>
        -->
    </body>
</html>
